.container {
    width: 100%;
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        height: 30px;
        .header-action-text {
            font-weight: 500;
            margin-left: 0.5rem;
            margin-right: 1.5rem;
            font-weight: 600;
        }
        .header-action-desc {
            color: #8d9399;
        }
    }
    .content {
        display: flex;

        // gap: 12px;
        .left {
            flex: 1 1 0;
            min-width: 0;
            border: 1px solid #c3c7cb;
            // min-height: 50px;
            border-radius: 4px;
            :deep(.JSearch-warp) {
                padding-bottom: 0 !important;
            }
            .left-header {
                background: #f8f9fa;
                height: 56px;
                line-height: 56px;
                border-radius: 4px;
                padding-left: 12px;
                background: #f8f9fa;
                box-sizing: border-box;
                border-width: 0px 0px 1px 0px;
                border-style: solid;
                border-color: #e4e6e7;
                display: flex;
                justify-content: space-between;
            }
            .left-list {
                min-height: 600px;
                .renderId {
                    display: flex;
                }
              
                .left-drag {
                    border: 1px solid #eff0f1;
                    height: 32px;
                    line-height: 32px;
                    border-radius: 3px;
                    color: #a3a3a3;
                    font-size: 14px;
                    letter-spacing: 0;
                    padding-left: 4px;
                    // text-align: center;
                }
                .left-map {
                    height: 32px;
                    background-color: #f8f9fa;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border: 1px solid #eff0f1;
                    border-radius: 3px;
                    color: #1a1a1a;
                    font-size: 14px;
                    letter-spacing: 0;
                    padding: 0 8px;
                }
               
            }
            .left-state{
                margin-left: 30px
            }
            .left-bottom {
                height: 48px;
                line-height: 48px;
                padding-left: 12px;
                box-sizing: border-box;
                /* Gray400 */
                border-width: 1px 0px 0px 0px;
                border-style: solid;
                border-color: #c3c7cb;
                font-size: 12px;
                font-weight: normal;
                letter-spacing: 0em;
                /* Gray600 */
                color: #646c73;
            }
        }
        .fold {
            display: flex;
            align-items: center;
            .fold-item {
                position: relative;
                width: 20px;
                height: 55px;
                border-radius: 4px;
                border: 1px solid #9e9e9e;
                background-color: #fff;
                display: flex;
                align-items: center;
            }
        }
        .right {
            width: 380px;
            border-radius: 4px;
            border: 1px solid #c3c7cb;
            .right-title {
                background: #020202;
                height: 56px;
                line-height: 56px;
                border-radius: 4px;

                background: #f8f9fa;
                box-sizing: border-box;
                /* Gray300 */
                border-width: 0px 0px 1px 0px;
                border-style: solid;
                border-color: #e4e6e7;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 12px;
            }
            .right-list {
                padding: 12px;
                max-height: 630px;
                min-height: 640px;
                overflow-y: auto;
                .right-item {
                    height: 80px;
                    border: 1px solid #eff0f1;
                    border-radius: 6px;
                    background-color: #f8f9fa;
                    margin-bottom: 10px;
                    padding: 12px;
                    .item-name {
                        font-size: 16px;
                        margin-bottom: 6px;
                        color: #1f2429;
                        width: 90%;
                    }
                    .item-info {
                        display: flex;
                        gap: 16px;
                        font-size: 14px;
                        color: #646c73;
                        span {
                            max-width: 140px;
                        }
                    }
                }
            }
            .right-bottom {
                margin-top: 12px;
                height: 20px;
                line-height: 20px;
                padding: 0 12px;
            }
        }
        .right-fold {
            // width: 10px;
            // border-radius: 4px;
            // border: 1px solid #c3c7cb;
        }
    }
}